:root {
  --primary-color: #31c27c; /*原色为#31c27c*/
}
body {
  margin: 0; /*外边距为0*/
  background: #f5f5f5; /*背景色为白色*/
  font-family: Microsoft Yahei; /*字体类型为microsoft yahei*/
  font-size: 14px; /*字体大小为14px*/
  min-width: 1000px; /*最小宽度为1000px*/
}
a {
  text-decoration: none; /*下划线设置为无*/
  color: #000; /*颜色为#00*/
}
header {
  height: 90px; /*高度设置为90px*/
  background: white; /*背景颜色为白色*/
  display: flex;
  align-items: center;  /*使用flex布局, 元素垂直居中对齐 (不推荐使用 浮动 flow:left; 来实现)*/
}
.header-inner,
main {
  width: 1200px;  /*宽度为1200px*/
  padding: 20px;
  margin: auto; /*内边距为20px，盒子居中*/
}
.tag-list {
  margin-top: 50px; /*顶部外边距为50px*/
  margin-bottom: 15px; /*底部外边距为15px*/
}
.tag-item {
  display: inline-block; /*元素会以内联块级元素的方式进行显示。这意味着元素会在同一行内显示，同时保持块级元素的一些特性，如设置宽度和高度。*/
  padding: 0 8px; /*内边距上下为0，左右边距为8px*/
  margin-right: 24px; /*右外边距为24px*/
  line-height: 26px; /*设置文本每行之间的高为26px*/
  color: #000; /*颜色设置为黑色*/
  text-decoration: none; /*字体装饰，none：取消已经存在的任何文本装饰*/
}
.tag-active {
  background: var(--primary-color); /*将primary-color的属性赋给backgroung做背景颜色*/
  color: white; /*颜色设置为白色*/
}
.tag-item:not(.tag-active):hover {
  color: var(--primary-color); /*将primary-color的属性赋给backgroung做背景颜色*/
}
.nowrap {
  white-space: nowrap; /*可以阻止元素中的文本换行*/
  overflow: hidden; /*控制元素溢出方式，溢出的内容会隐藏*/
  text-overflow: ellipsis; /*属性用于控制当文本超出容器时的显示方式，‌ellipsis‌：表示文本溢出时显示省略号*/
}
.playlist {
  display: grid; /* display grid可以将容器划分为行和列，形成单元格，然后可以指定每个单元格中的内容位置，从而实现复杂的布局设计。‌*/
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /*可以的定义网格列或者行的维度大小，后面的代表了自动填充，minmanx最小值，配合flex分配空间*/
  gap: 45px 15px; /*属性用于同时设置行和列之间的间隙，（45px）设置行间隙，第二个值（15px）设置列间隙*/
  margin-bottom: 45px; /*指设置元素的下外边距为45像素。可以影响元素与其他元素之间的距离*/
}
.cover-wrap {
   /*使用flex布局*/
  display: flex; 
  position: relative; /*对元素进行相对定位*/
  overflow: hidden; /*当元素内容超出容器大小时，会将超出的部分隐藏*/
  width: 100%; /*表示元素的宽度占据其父元素的100%*/
  margin-bottom: 15px; /*内边框底部为15px*/
  align-items: center; /*设置容器中的项目在交叉轴上的对齐方式为居中对齐*/
  justify-content: center; /*用于将弹性容器中的子项目在主轴方向上居中对齐*/
  cursor: pointer; /*是CSS中的一个属性，用于设置鼠标指针在元素上的样式为手型*/
}
.cover-img {
  width: 100%; /*表示元素的宽度占据其父元素的100%*/
  transition: all 0.75s; /*指的是所有属性在0.75秒内平滑过渡*/
}
.cover-mask {
  position: absolute; 
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; /*使用绝对定位，并将上下左右均设置为零*/
  background: #000; /*将背景设置为#000*/
  opacity: 0; /*表示元素完全透明，用户可以通过它看到背景内容，但元素仍然占据原来的空间*/
  transition: all 0.5s; /*指的是当元素发生变化时，所有属性在0.5秒内平滑过渡*/
}
.cover-play {
  position: absolute; /*使用绝对定位，并将上下设置为距50%，左右设置为距50%*/
  left: 50%;
  top: 50%;
  margin-left: -35px;
  margin-top: -35px; /*内边框上下左右设置为-35px*/
  opacity: 0; /*表示元素完全透明，用户可以通过它看到背景内容，但元素仍然占据原来的空间*/
  transform: scale(0.7); /*元素会沿着X轴和Y轴等比例缩小到原始大小的70%*/
  transition: all 0.5s;  /*指的是所有属性在0.5秒内平滑过渡*/
}
.cover-wrap:hover .cover-mask {
  opacity: 0.2; /*表示元素的不透明度为20%*/

}
.cover-wrap:hover .cover-play {
  opacity: 1; /*表示元素完全不透明*/
  transform: scale(1); /*保持元素的尺寸不变*/
}
.cover-wrap:hover .cover-img {
  transform: scale(1.07); } /*表示将元素放大到原来的1.07倍*/
.album-title:hover {
  color: var(--primary-color);  /*将primary-color的属性赋给color做背景颜色*/
}
.album-author {
  color: #999; /*将颜色赋为#999*/
  line-height: 1.6; /*表示两行文字基线之间的距离是当前字号大小的1.6倍*/
}
.album-author:hover {
  color: var(--primary-color); /*将primary-color的属性赋给color做背景颜色*/
}
.album-time {
  color: #999; /*将颜色赋为#999*/
}
.page {
  display: flex; /*使用flex布局, 元素垂直居中对齐 (不推荐使用 浮动 flow:left; 来实现)*/
  align-items: center;
  justify-content: center; /*使元素也保持水平居中对齐*/
}
.page-item {
  display: inline-block;  /*元素会以内联块级元素的方式进行显示。这意味着元素会在同一行内显示，同时保持块级元素的一些特性，如设置宽度和高度。*/
  color: #a2a2a2;
  line-height: 50px; /*表示每行文字的高度为50像素*/
  padding: 0 20px; /*外边框上下为0，左右边框为20px*/
  margin: 10px; /*内边距为10px*/
  font-size: 16px; /*字体大小为16px*/
}
.page-current,
.page-item:not(.page-more):hover {
  background: var(--primary-color); /*将primary-color的属性赋给color做背景颜色*/
  color: white; /*颜色设置为白色*/
}
footer {
  margin-top: 60px; /*控制元素与上方内容的距离为60px*/
  background: #333; /*背景颜色定为#333*/
  height: 200px; /*表示将元素的高度设置为200像素*/
}